.list_block {
  padding: 0 24rpx;
  flex: 1;
  overflow: hidden;
  background-color: #F6F7FB;
  scroll-view {
    height: 100%;
    overflow: hidden;
  }
}

.tabs {
  height: 86rpx;
  width: 100%;
  background: #fff;
  display: flex;
  align-items: center;
  .tab {
    width: 50%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    color: #262728;
    font-size: 28rpx;
    font-weight: 400;
    &.active {
      color: #007AFF;
    }
    .line {
      width: 83rpx;
      height: 6rpx;
      border-radius: 3rpx;
      position: absolute;
      bottom: 10rpx;
      left: 50%;
      transform: translateX(-50%);
    }
    &.active {
      .line {
        background: #007AFF;
      }
    }
  }
}


.lists {
  position: relative;
  .list {
    margin-top: 16rpx;
    border-radius: 18px;
    border: 2rpx solid #FFF;
    background: linear-gradient(180deg, #E2F3FF 0%, #FFF 100%);
    padding: 16rpx 24rpx;
    .base-info {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-bottom: 20rpx;

      .left-avatar {
        display: flex;
        align-items: center;
        margin-right: 10rpx;
        flex: 1;

        .avatar-w {
          margin-right: 22rpx;
          position: relative;
          top: -6rpx;

          .avatar {
            width: 96rpx;
            height: 96rpx;
            padding: 2rpx;
            background: #fff;
            border-radius: 10rpx;
            overflow: hidden;
            transform: rotate(-15deg);
            position: relative;
            top: 10rpx;
            border: 3rpx solid #fff;

            image {
              width: 100%;
              height: 100%;
              border-radius: 18rpx;
            }
          }

          .country {
            box-sizing: border-box;
            padding: 2rpx;
            background: #fff;
            border-radius: 8rpx;
            display: inline-block;
            position: absolute;
            bottom: -12rpx;
            left: 4rpx;
            border: 5rpx solid #fff;

            image {
              border-radius: 4rpx;
              width: 80rpx;
              height: 30.3rpx;
              display: block;
            }
          }
        }

        .desc-avatar {
          margin-left: 8rpx;
          display: flex;
          align-items: center;
          justify-content: space-between;
          flex: 1;
          .start {
            position: relative;
            right: -26rpx;
          }
          .name {
            color: #262728;
            font-size: 28rpx;
            font-weight: 500;
            margin-right: 6rpx;
            margin-bottom: 12rpx;
          }
          .vip-leval {
            display: inline-flex;
            align-items: center;
            border-radius: 19rpx;
            height: 40rpx;
            background: linear-gradient(118deg, #b9e2ff 4.79%, #0295fa 66.63%);
            padding: 0 18rpx 4rpx 4rpx;

            text {
              color: #fff;
              font-size: 22rpx;
              font-weight: 500;
              position: relative;
              top: 4rpx;
              font-style: italic;
            }

            .circle {
              width: 32rpx;
              height: 32rpx;
              border-radius: 50%;
              background-color: #fff;
              display: flex;
              align-items: center;
              justify-content: center;
              margin-right: 5rpx;
              position: relative;
              top: 2rpx;

              image {
                width: 20rpx;
                height: 20rpx;
              }
            }
          }
        }
      }

 
    }
    .message-bottom {
      padding-top: 16rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-top: 1px dashed #B5B5B5;
      .left-liuyan {
        .titme {
          color: #262728;
          font-size: 24rpx;
          font-weight: 400;
          margin-bottom: 8rpx;
        }
        .info {
          color: #262728;
          font-size: 28rpx;
          font-weight: 500;
        }
      }
      .btn {
        height: 60rpx;
        border-radius: 30rpx;
        background: linear-gradient(118deg, #B9E2FF 4.79%, #0295FA 66.63%);
        display: flex;
        align-items: center;
        justify-content: center;
        color: #FFF;
        font-size: 24rpx;
        font-weight: 500;
        padding: 0 16rpx;
        position: relative;
        .translatexxxxxx {
          position: absolute;
          top: -10rpx;
          right: -10rpx;
        }
        
      }
    }
  }
 
}



